<!DOCTYPE html>
<html lang="en">
<title>查看团课</title>
<#import "/layout/layout.html" as body/>
<@body.page>

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title overflow">
                    <h5 class="pull-left">查看团课</h5>
                </div>
                <div class="ibox-content">
                    <form method="post" class="form-horizontal" enctype="multipart/form-data" action="to_course_team_save" name="addForm" id="addForm">
                        <input type="hidden" name="courseId" id="courseId" value="${course.courseId}"/>
                        <div class="form-group"><h3 class="col-sm-12 margin-top">团课信息</h3></div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group"><label class="col-sm-2 control-label">团课名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="title" value="${course.title}">
                                <span class="help-block m-b-none text-right">0/50</span>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group"><label class="col-sm-2 control-label">上课教练</label>

                            <div class="col-sm-10">
                                <select class="form-control m-b" name="coachId" id="coachId">
                                    <#if coachList??>
                                        <#list coachList as coach>
                                            <option value="${coach.id}">${coach.nickName!}</option>
                                        </#list>
                                    </#if>
                                </select>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group"><label class="col-sm-2 control-label">课程费用</label>

                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="price"
                                <#if course.price??>value="${course.price}"</#if>
                                >
                            </div>
                        </div>
                        <div class="form-group"><label class="col-sm-2 control-label">最大报名人数</label>

                            <div class="col-sm-10">
                                <input type="number" class="form-control" name="maxCount" id="maxCount"
                                <#if course.maxCount??>value="${course.maxCount}"</#if>
                                >
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group"><label class="col-sm-2 control-label">上课门店</label>

                            <div class="col-sm-10">
                                <input type="hidden" id="storeIds" name="storeIds" value="">
                                <input type="hidden" id="storeId_hidden" value="${course.storeId}">
                                <select data-placeholder="请选择上课门店..." class="chosen-select" multiple
                                        style="width:100%;" tabindex="4" name="storeId" id="storeId">
                                    <#if storeList??>
                                        <#list storeList as store>
                                            <option value="${store.id}"
                                            <#if store.id=course.storeId>selected</#if>
                                            >${store.storeName!}</option>
                                        </#list>
                                    </#if>
                                </select>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="form-group"><label class="col-sm-2 control-label">上课操房</label>
                            <div class="col-sm-10">
                                <select id="workoutRoomNum" name="workoutRoomNum" class="form-control m-b chosen-select" style="width:100%;" tabindex="4">

                                </select>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="form-group"><label class="col-sm-2 control-label">上课日期</label>

                            <div class="col-sm-10">
                                <div class="input-group date">
                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    <input type="text" class="form-control" name="startDate" id="startDate">
                                </div>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group"><label class="col-sm-2 control-label">开始结束时间</label>

                            <div class="col-sm-10">
                                <div class="col-sm-6 padding-left-0">
                                    <div class="input-group clockpicker" data-autoclose="true">
                                        <input type="text" class="form-control" name="startTime" id="startTime">
                                        <span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
                                    </div>
                                    <h5>开始时间</h5>
                                </div>
                                <div class="col-sm-6 padding-right-0">
                                    <div class="input-group clockpicker" data-autoclose="true">
                                        <input type="text" class="form-control" name="endTime" id="endTime">
                                        <span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
                                    </div>
                                    <h5>结束时间</h5>
                                </div>
                            </div>
                        </div>
                        <!--<div class="hr-line-dashed"></div>-->
                        <!--<div class="form-group"><label class="col-sm-2 control-label">团课群二维码</label>-->

                            <!--<div class="col-sm-10">-->
                                <!--<input type="hidden" id="courseTeamQRCode" name="courseTeamQRCode" value="${QRCode}">-->
                                <!--<div id="course_team_QRCode_file" style="min-height: 150px;" class="dropzone"-->
                                     <!--action="#">-->
                                    <!--<div class="dropzone-previews"></div>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <h3 class="col-sm-12 margin-top-5">课程信息
                                <small>(选择课程所属类别后，系统会自动拉取对应的标准课程信息，您可根据需要自行调整文字及图片信息)</small>
                            </h3>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group"><label class="col-sm-2 control-label">所属类别</label>
                            <div class="col-sm-10">
                                <select class="form-control m-b" name="standardCourse" id="standardCourse">
                                    <#if courseStandardList??>
                                        <option value="-1">请选择课程类别</option>
                                        <#list courseStandardList as standard>
                                            <option value="${standard.id}">${standard.name!}</option>
                                        </#list>
                                    </#if>
                                </select>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">类别介绍文字</label>

                            <div class="col-sm-10">
                                <textarea class="form-control" rows="5" id="introduce" name="introduce">${course.introduce!}</textarea>
                                <span class="help-block m-b-none">字数不超过600汉字；可分段描述<i
                                        class="pull-right">0/600</i></span>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">适合人群</label>

                            <div class="col-sm-10">
                                <textarea class="form-control" rows="3" id="crowd" name="crowd">${course.crowd!}</textarea>
                                <span class="help-block m-b-none">字数不超过100汉字；可分段描述<i
                                        class="pull-right">0/100</i></span>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group"><label class="col-sm-2 control-label">属性标签</label>

                            <div class="col-sm-10">
                                <input type="hidden" id="course_val" name="course_val">
                                <select data-placeholder="请选择标签..." class="chosen-select" multiple
                                        style="width:100%;" tabindex="4" name="course_attr" id="course_attr">
                                    <#if courseStandardList??>
                                        <#list courseStandardList as list>
                                            <#if list_index == 0>
                                                <#list list.courseAttr?split('#') as opt>
                                                    <option value="${opt}">${opt}</option>
                                                </#list>
                                            </#if>
                                        </#list>
                                    </#if>
                                </select>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group"><label class="col-sm-2 control-label">视频链接</label>
                            <div class="col-sm-10"><input type="text" class="form-control" name="video_url" value="${videoLink}"></div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">视频封面图</label>
                            <div class="col-sm-10">
                                <div id="video_preview_file" style="min-height: 230px;" class="dropzone"
                                     action="#">
                                    <input type="hidden" id="video_preview" name="video_preview" value="${videoImgLink}">
                                    <div class="dropzone-previews"></div>
                                </div>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group"><label class="col-sm-2 control-label">类别硬照</label>

                            <div class="col-sm-10" disabled>
                                <div id="course_standard_images_file" style="min-height: 230px;" class="dropzone"
                                     action="#" disabled>
                                    <input type="hidden" id="course_standard_images" name="course_standard_images" value="${standardImgLink}">
                                    <div class="dropzone-previews"></div>
                                </div>
                                <div class="m text-left">
                                    <small>大小不能超过1.5M;必须大于两张，且总数为偶数。</small>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="ibox-content overflow">
                    <div class="col-sm-12">
                        <button id="btnSubmit" type="button" class="btn btn-primary pull-right" onclick="location.href='${baseUrl}system/course/to_course_team_query'">返回</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--upload-->
<script type="text/javascript" src="${baseUrl}js/upload/promise.min.js"></script>
<script type="text/javascript" src="${baseUrl}js/upload/aliyun-oss-sdk.min.js"></script>
<script type="text/javascript" src="${baseUrl}js/upload/webToOss.js"></script>
<script src="${baseUrl}js/plugins/dropzone/dropzone.js"></script>
<link href="${baseUrl}css/plugins/clockpicker/clockpicker.css" rel="stylesheet">
<script src="${baseUrl}js/plugins/clockpicker/clockpicker.js"></script>
<script>
    /*硬照数组 */
    // Multi select//属性标签
    var courseAttr = null;
    var categoryPicList = new Array();
    $('.clockpicker').clockpicker();
    $(document).ready(function () {

        var config = {
            '.chosen-select': {},
            '.chosen-select-deselect': {
                allow_single_deselect: true
            },
            '.chosen-select-no-single': {
                disable_search_threshold: 10
            },
            '.chosen-select-no-results': {
                no_results_text: 'Oops, nothing found!'
            },
            '.chosen-select-width': {
                width: "95%"
            }
        }
        for (var selector in config) {
            $(selector).chosen(config[selector]);
        }
        //截止报名时间
        $('.input-group.date').datepicker({
            todayBtn: "linked",
            keyboardNavigation: false,
            forceParse: false,
            calendarWeeks: true,
            autoclose: true
        });
        var courseJson = ${courseData!};
        if (courseJson) {
            debugger;
            if (courseJson.name) {
                $("#standardCourse").val(courseJson.name).trigger("chosen:updated");
            }
            if (courseJson.standCourse && courseJson.standCourse.split("#").length > 0) {
                $("#course_attr").val(courseJson.standCourse).trigger("chosen:updated");
                loadStandard(courseJson.name, false);
            }
            if (courseJson.standCourse) {
                courseAttr = courseJson.standCourse;
            }
            if (courseJson.coachId) {
                $("#coachId").val(courseJson.coachId).trigger("chosen:updated");
            }

        }
        /* loadStandard($("#name").children('option:selected').val(), false); */
        $("#startTime").val(judgFailTime(courseJson.startTime, 0));
        $("#endTime").val(judgFailTime(courseJson.startTime, courseJson.duration));
        $("#startDate").val(dateF(courseJson.startTime));

        $("#storeId").trigger("change");

    });
    function formSubmit() {
        var values = $("#storeId").val();
        $("#storeIds").val(values);
        var course_val = $("#course_attr").val();
        $("#course_val").val(course_val);
        document.getElementById("addForm").submit();
    }

    $("#standardCourse").change(function () {
        var id = $(this).children('option:selected').val();
        $.ajax({
            type: "post",
            url: "to_course_standard_query",
            data: "id=" + id,
            success: function (result) {
                var r = jQuery.parseJSON(result);
                $("#introduce").val(r.introduce);
                $("#crowd").val(r.crowd);
                $("#video_url").val(r.videoUrl);
                if (r.standCourse.length > 0) {
                    var attrs = r.standCourse.split("#");
                    for (index in attrs) {
                        $("#course_attr").append("<option selected value='" + attrs[index] + "'>" + attrs[index] + "</option>");
                    }
                }
            }
        });
    });

    Dropzone.autoDiscover = false;
    //视频封面图
    var myDropzone2 = new Dropzone("#video_preview_file", {
        url: "upload_pic",
        uploadMultiple: false,
        addRemoveLinks: true,
        dictDefaultMessage: "将文件拖到此处上传",
        dictFileTooBig: "文件过大",
        dictCancelUpload: "取消上传",
        dictRemoveFile: "移除文件",
        maxFilesize: 10.5,
        acceptedFiles: ".jpg,.png",
        method: 'post',
        filesizeBase: 1024,

        init: function () {
            var link = $("#video_preview").val();
            if (!link || link.length <= 0) {
                link = "";
            }
            this.emit("initimage", link);
            this.on("success", function (file, response, e) {
                if (response.error) {
                    $(file.previewTemplate).children('.dz-error-mark').css('opacity', '1')
                } else {
                    $("#video_preview").val(response.url + ";" + file.size);
                }
            });
            this.on("sending", function (file, xhr, formData) {
                formData.append("filesize", file.size);
            });
            this.on("removedfile", function (file) {
                console.log("File " + file.name + " removed");
            });
        }
    });

    //类别硬照
    var myDropzone3 = new Dropzone("#course_standard_images_file", {
        url: "upload_pic",
        uploadMultiple: false,
        addRemoveLinks: true,
        dictDefaultMessage: "将文件拖到此处上传",
        dictFileTooBig: "文件过大",
        dictCancelUpload: "取消上传",
        dictRemoveFile: "移除文件",
        maxFilesize: 10.5,
        acceptedFiles: ".jpg,.png",
        method: 'post',
        filesizeBase: 1024,
        init: function () {
            var link = $("#course_standard_images").val();
            if (!link || link.length <= 0) {
                link = "";
            }
            this.emit("initimage", link);
            this.on("success", function (file, response, e) {
                if (response.error) {
                    $(file.previewTemplate).children('.dz-error-mark').css('opacity', '1')
                } else {
                    var pic_url = $("#course_standard_images").val();
                    if (pic_url.length > 0) {
                        $("#course_standard_images").val(pic_url + "," + response.url + ";" + file.size);
                    } else {
                        $("#course_standard_images").val(response.url + ";" + file.size);
                    }
                    categoryPicList.push(response.url + ";" + file.size);
                }
            });
            this.on("sending", function (file, xhr, formData) {
                formData.append("filesize", file.size);
            });
            this.on("removedfile", function (file) {
                console.log("File " + file.name + " removed");
            });
        }
    });

    //动态改变基础课程值
    $("#standardCourse").change(function () {
        var id = $(this).children('option:selected').val();
        loadStandard(id, false);
    })


    function loadStandard(id, isFirst) {
        $.ajax({
            type: "post",
            url: "course_standard",
            data: {"id": id},
            success: function (courseStandard) {
                var data = $.parseJSON(courseStandard);
                if (data) {
                    $("#introduce").text(data.introduce);
                    $("#crowd").text(data.crowd);
                    if (!isFirst) {

                        var html = "";
                        $.each(data.standCourse.split('#'), function (i, result) {
                            html += '<option value=' + result + '>' + result + '</option>';
                        })
                        $("#course_attr").empty().append(html).trigger("chosen:updated");
                        if (courseAttr && courseAttr.split("#").length > 0) {
                            var caArr = $("#course_attr option");
                            var cJCa = courseAttr.split("#");
                            for (var i = 0; i < caArr.length; i++) {

                                for (var m = 0; m < cJCa.length; m++) {

                                    if (cJCa[m].indexOf(caArr[i].innerText) >= 0) {
                                        $("#course_attr option[value=" + cJCa[m] + "]").attr('selected', true);
                                    }
                                }
                            }
                            $("#course_attr").trigger("chosen:updated");
                        }

                    }
                }
            }
        });
    }
    // 添加分钟数
    function judgFailTime(dates, minute) {
        var time = new Date(dates.replace("-", "/"));
        var b = minute; //分钟数
        time.setMinutes(time.getMinutes() + b, time.getSeconds(), 0);
        return time.getHours() + ":" + time.getMinutes();
    }
    //日期格式化
    function dateF(dates) {
        var time = new Date(dates.replace("-", "/"));
        mm = time.getMonth() + 1;
        return (mm >= 10 ? mm : "0" + mm) + "/"
                + (time.getDate() >= 10 ? time.getDate() : "0" + time.getDate()) + "/" + time.getFullYear();
    }

    /**
     * 拉取对应门店 ID 的门禁设备
     *
     * @param storeId 门店 ID
     */
    $("#storeId").change(function () {
        var param = {
            storeId: this.value
        };
        $("#workoutRoomNum").html("");
        $.post("${baseUrl}system/course/storeAccessList", param, function (result) {
            result = JSON.parse(result);
            var option = "<option value='num'>name</option>";
            var html = "";
            $.each(result, function (i, data) {
                html +=(option.replace('num',data.workoutRoomNum).replace('name', data.workoutRoomName))
            });
            $("#workoutRoomNum").html(html);
            var workoutRoomNum = ${(course.workoutRoomNum)!"null"}
            debugger
            if(workoutRoomNum && workoutRoomNum > 0){
                $("#workoutRoomNum").val(workoutRoomNum);
            }
        });
    });

</script>

</@body.page>
</html>